<template>
  <div class="resume">
    <div class="content">
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :xs="20" :sm="18" :md="18" :lg="18" :xl="18">
          <div class="right">
            <div class="top">
              <h2>
                <span>最佳吉名</span>
                <em v-if="isMerchant==false" @click="dialogFormVisible = true" style="cursor:pointer;">举报</em>
              </h2>
              <h3>针对本命局配合汉子五行，音、义、形，综合确定如下起名方案：</h3>
              <!-- <ul>
                                <li v-for="(item, index) in list" :key="index">
                                    <h4 class="fzm">
                                        {{ index + 1 }}. {{ item.name }}
                                        <el-button size="mini">{{
                                            item.attribute
                                        }}</el-button>
                                    </h4>
                                    <div>
                                        <p
                                            v-for="ele in item.info"
                                            :key="ele.text"
                                        >
                                            <span>{{ ele.text }}</span>
                                            {{ ele.info }}
                                        </p>
                                    </div>
                                    <h5>
                                        文化渊源
                                    </h5>
                                    <p>
                                        {{ item.origin }}
                                    </p>
                                </li>
              </ul>-->
              <!-- <div style="width:100px;height:100px; background:red;"></div> -->
              <div
                :class="{'detail-memo':FirstActive,'detail-memos': TwoActive}"
                v-html="merchantDetail"
              ></div>
            </div>
          </div>
        </el-col>
        <el-col :xs="20" :sm="6" :md="6" :lg="6" :xl="6">
          <left :detail="params" :isBid="isBid" :merchantGuid="merchantGuid" :taskGuid="taskGuid"></left>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="举报" @close="close" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="举报原因">
          <el-select v-model="form.title" placeholder="请选择举报原因">
            <el-option label="同行抄袭" value="同行抄袭"></el-option>
            <el-option label="电脑起名" value="电脑起名"></el-option>
            <el-option label="解析不准" value="解析不准"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" :rows="4" placeholder="请输入举报原因" v-model="form.info"></el-input>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            :action=acUrl
            ref="upt"
            :headers="uploadHeaders"
            :multiple="false"
            name="file"
            :on-success="uploadSuccess"
            :limit="1"
          >
            <el-button size="small" type="primary">上传附件</el-button>
            <div slot="tip" class="el-upload__tip">为了能更快的处理您的举报信息,建议上传截图及其他相关文件等证据</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="userReport">举 报</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import left from "@/components/resumeLeft1.vue";
export default {
  components: {
    left
  },
  data() {
    return {
      acUrl:"https://api.zhubaba.cn/oss/upLoad",
      FirstActive: false,
      TwoActive: false,
      isBid: false, // 改任务是否已投标
      detail: {}, // 请求的数据结果
      taskGuid: "", // 任务的id
      merchantGuid: "", // 商户的id
      uploadHeaders: {
        "user-session": JSON.parse(localStorage.getItem("key"))
      },
      form: {
        title: "",
        info: "",
        img: "",
        taskId: "",
        merchantId: ""
      },
      isTrue: false,
      dialogFormVisible: false,
      list: [],
      params: {}, // 上一个页面传递过来的参数
      merchantDetail: "", // 商家的介绍详情
      isMerchant:false,//是不是商户端来的
    };
  },
  created() {
    //console.log(this.uploadHeaders)
    this.params = JSON.parse(decodeURIComponent(this.$route.query.params));
    if (this.$route.query.m == "sh") {
      this.isMerchant = true;
    }
    let taskGuid = this.$route.query.taskGuid;
    let merchantGuid = this.$route.query.merchantGuid;
    this.isBid = this.params.t_status == 3 ? false : true;
    this.init();
    // if (taskGuid) {
    //     this.merchantGuid = merchantGuid;
    // 	this.taskGuid = taskGuid;
    // 	this.form.taskId = taskGuid;
    // 	this.form.merchantId = merchantGuid;
    //     this.init();
    // }

    var flag = this.IsPC();
    flag == true ? (this.FirstActive = true) : (this.TwoActive = true);
  },
  methods: {
    init() {
      // 获取商户的介绍详情,需要先判断有没有详情
      if(this.params.hasOwnProperty('memo_url')){
        this.$ajax.post(this.params.memo_url).then(res => {
          this.merchantDetail = res.data;
        });
      }
      // this.$ajax.post("/merchant/getReplyTaskDetail", {
      //     merchantGuid: this.merchantGuid,
      //     taskGuid: this.taskGuid
      // }).then(res => {
      //     res = res.data.data;
      //     this.detail = res;
      // })
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = [
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    close() {
      this.form = {
        title: "",
        info: "",
        img: ""
      };
      this.$refs.upt.clearFiles();
    },

    // 用户提交举报信息
    userReport() {
      this.dialogFormVisible = false;
      this.$ajax.post("/user/report", this.form).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "举报成功，我们会尽快处理!",
            type: "success"
          });
          this.close();
        } else [this.$message.error(res.data.msg)];
      });
    },

    // 举报附件上传成功的回调
    uploadSuccess(response, file, fileList) {
      this.form.img = response.data;
    }
  }
};
</script>

<style lang="scss" >
.el-row {
  flex-wrap: wrap;
  width: 100%;
}
.resume {
  background: #f7f7f7;
  padding: 58px 0;

  .content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .right {
      flex: 1;
      margin: 0 16px;
      background: #fff;
      padding: 38px 54px;
      border-radius: 12px;
      font-family: "黑体";
      .top {
        h2 {
          display: flex;
          align-items: center;
          font-size: 20px;
          line-height: 36px;
          color: #5c5c5c;
          justify-content: space-between;
          em {
            font-style: normal;
            text-decoration: underline;
            color: #959494;
            font-size: 16px;
          }
        }
        h3 {
          font-size: 18px;
          line-height: 34px;
          color: #959494;
        }
        .detail-memo {
          font-size: 16px;
          line-height: 28px;
          color: #888;
        }
        .detail-memo p img {
          width: 720px;
          height: 800px;
        }
        .detail-memos {
          font-size: 16px;
          line-height: 28px;
          color: #888;
        }
        .detail-memos p img {
          width: 265px;
          height: 330px;
          margin-left: -30px;
        }
        ul {
          padding: 20px 0;
          li {
            padding: 20px 0;
            h4 {
              font-size: 32px;
              line-height: 62px;
              color: #565656;
              display: flex;
              align-items: center;
              .el-button {
                border-color: #4d67dc;
                color: #4d67dc;
                margin-left: 14px;
              }
            }
            > div {
              p {
                font-size: 18px;
                line-height: 34px;
                color: #565656;
              }
            }
            h5 {
              font-weight: bold;
              font-size: 18px;
              color: #565656;
              padding: 14px 0;
            }
            > p {
              color: #959494;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .resume .content .right {
    margin: 10px 0;
    .top ul li {
      h4 {
        font-size: 24px;
      }
      h3 {
        font-size: 16px;
      }
    }
  }
}
</style>
<style scoped>
  @media screen and (max-width: 750px){
    /deep/ .el-dialog{
      width: 80%;
    }
    .el-select{
      width: 68%;
    }
    .el-form-item__content{
      line-height: 20px;
    }
  }
</style>